<template>
  <div class="oee">
    <div class="top">
      <guage name="综合指数" :size="10" :data="data.composite"></guage>
    </div>
    <div class="bottom">
      <guage class="gua" name="可用性" :size="8" :data="data.availability" />
      <guage class="gua" name="表现性" :size="8" :data="data.performance" />
      <guage class="gua" name="质量指数" :size="8" :data="data.quality" />
    </div>
  </div>
</template>
<script setup>
import guage from "./guage.vue";

defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});
</script>
<style scoped lang="scss">
.oee {
  width: 100%;
  height: 100%;
  .top {
    width: 100%;
    height: 55%;
  }
  .bottom {
    width: 100%;
    height: 45%;
    display: flex;
    justify-content: space-between;
    .gua {
      flex: 1;
    }
  }
}
</style>
